[#ftl]
[@define "agile._ContainerMoveCoordinatorMixin"]
	moveableOffset:0
	,constructor: function(){
		//var self = this;
		this.moveableOffset = 0;
		this.subscribe("agile.keys.onkeyup",function(event){
			switch(event.keyCode){
				case keys.LEFT_ARROW:					
				case keys.RIGHT_ARROW:					
				case keys.UP_ARROW:					
				case keys.DOWN_ARROW:
				case keys.HOME:
				case keys.END:
				case keys.PAGE_UP:
				case keys.PAGE_DOWN:
					this.moveableOffset = 0;
					break;				
			}					
		});
		
		this.subscribe("agile.keys.onkeydown",function(event){
//			if(!this.metadata("childMoveable")){return;}
			switch(event.keyCode){
				case keys.HOME:
				case keys.PAGE_UP:
					this.moveableOffset = -39;					
				case keys.LEFT_ARROW:
				case keys.UP_ARROW:					
					this.moveSelectedComponents(event.keyCode,--this.moveableOffset);
					break;
					
				case keys.END:
				case keys.PAGE_DOWN:
					this.moveableOffset = 39;
				case keys.DOWN_ARROW:	
				case keys.RIGHT_ARROW:					
					this.moveSelectedComponents(event.keyCode,++this.moveableOffset);
					break;
			}
		});
	}
	,init:function(){
		////console.log(this.declaredClass,"[agile._ContainerMoveCoordinatorMixin]init...");
		this.subscribe("agile.component.moving."+this.id,function(domNode,left,top){
//			console.log(this.declaredClass,"onMoving:my id=",this.id);
//			if(!this.isSelected()) {return;}
			this.onComponentMoving(domNode,left,top);
		});
	}
	[@method "moveSelectedComponents"/]
	,moveSelectedComponents:function(direction,moveOffset){			
		var stop = false;
		var leftOrTop = "";
		var selectedWidgets = array.filter(this.getSelectedChildren(),function(c){return c.metadata("moveable")});
		switch(direction){
			case keys.HOME:			
			case keys.LEFT_ARROW:
				leftOrTop = "left";
				for(var i = 0; i < selectedWidgets.length; i++){
					if(selectedWidgets[i].style1("left") + moveOffset <= 0){
						stop = true;
						break;
					}
				}	
				break;
				
			case keys.END:			
			case keys.RIGHT_ARROW:
				leftOrTop = "left";
				for(var i = 0; i < selectedWidgets.length; i++){
					if(selectedWidgets[i].style1("left") + selectedWidgets[i].style1("width") + moveOffset  >= this.agileCanvasWidth){	
						stop = true;
						break;
					}
				}
				break;
				
			case keys.PAGE_UP:	
			case keys.UP_ARROW:
				leftOrTop = "top";
				for(var i = 0; i < selectedWidgets.length; i++){
					if(selectedWidgets[i].style1("top") + moveOffset <= 0){
						stop = true;
						break;
					}
				}
				break;
				
			case keys.PAGE_DOWN:	
			case keys.DOWN_ARROW:
				leftOrTop = "top";
				for(var i = 0; i < selectedWidgets.length; i++){
					if(selectedWidgets[i].style1("top") + selectedWidgets[i].style1("height") + moveOffset >= this.agileCanvasHeight){
						stop = true;
						break;
					}
				}
				break;	
		}			
		
		if(!stop){			
			array.forEach(selectedWidgets,function(widget){
				var value = widget.style1(leftOrTop) + moveOffset;					
				widget.style1(leftOrTop,value);
			});
		}	
	}
	[@method "onComponentMoving"/]
	,onComponentMoving:function(domNode,left,top){
		var currentWidget = registry.byNode(domNode);		
		var deltaLeft = currentWidget.style1("left") - left;
		var deltaTop = currentWidget.style1("top") - top;
//		console.log("deltaLeft,deltaTop:",deltaLeft,deltaTop);
		var stop = false;		
		var canvasMarginBox = agile.calcSize(this.containerNode);
		var selectedWidgets = this.getSelectedChildren();
		for(var i = 0; i < selectedWidgets.length; i++){
			var widget = selectedWidgets[i];
			
			if(stop){
				break;
			}else{
				stop = (widget.style1("left") - deltaLeft <= 0)
						|| (widget.style1("left") - deltaLeft + widget.style1("width")>= canvasMarginBox.w)
						|| (widget.style1("top")  - deltaTop <= 0)
						|| (widget.style1("top")  - deltaTop + widget.style1("height")>= canvasMarginBox.h);				
			}		
		}
		
		if(!stop){
			array.forEach(selectedWidgets,function(widget){
//				console.log("[_Container]onComponentMoving",widget.dimension,widget.style1("left") , deltaLeft);
				widget.style1("left",widget.style1("left") - deltaLeft);
				widget.style1("top",widget.style1("top") - deltaTop);	
			});				
		}else{
			//TODO:fix me:should stop currentWidget from moving
//			console.log("@@@@@@@@@@@@@",currentWidget.style1("left"),currentWidget.style1("top"));
			currentWidget.style1("left",currentWidget.style1("left") - deltaLeft);
			currentWidget.style1("top",currentWidget.style1("top") - deltaTop);	
		}
//		//console.log(this.declaredClass,"@@@@@selectedWidgets",selectedWidgets);		
//		topic.publish("agile.widget.changed.styles",[this,"style.left",left+"px"]);	
//		topic.publish("agile.widget.changed.styles",[this,"style.top",top+"px"]);
	}
[/@]